このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

011新着リストを表示した固定ページを作り、トップページにする。

前回は、「固定ページ」の作り方を説明しました。

今回は、新規の固定ページに、新着リストを載せ、その固定ページをトップページにする、ということをやってみたいと思います。

ん?
それなら、index.php の内容を少し書き換えるだけでいいんじゃないの?
と思うかもしれませんが、それだと「通常投稿」だけのリストになっちゃうんでは・・・? と思ったんです。


私の自作した「オリジナルテーマ」は、「いくつかのカスタム投稿」を組み込んでいます。
「通常の投稿」は、「日記(=その他のつぶやき)」みたいな感じで使い、メインコンテンツは、別の「カスタム投稿」にするつもりです。

「複数のカスタム投稿」+「通常の投稿」、それらをすべて「新着」としてリスト表示し、尚且つ、そのページをトップページにしたい、ということです。

(もしかしたら、index.php に書いても問題なく機能するんじゃないか? という気もしますが、作り方として、分類しやすいだろうという点から、今回は「固定ページ」で作りたいと思います。)


「固定ページ」のテンプレートを作る

トップページにするテンプレートは、普通は home.php とか front-page.php とするのが標準のようなのですが、
もし違う名前で作ったらどうなるのかな、とふと思い
hajimeni.php という名前で作ってみました。

内容は、width230pxくらいで[サムネイル]--[本文の抜粋]--[更新日時]が縦に並んだ 1ブロックを、3つ横に並べて、4列、合計12件分の新着リストを表示する、というイメージです。


「固定ページ」に新着リストの条件分岐を記述する

front-page.php(自分の場合はhajimeni.php

<?php
/*
Template Name: はじめに
*/
?>
<?php get_header(); ?>

<div id="content_ha">
<div id="innerbox_ha">

<div class="post_ha">
	<h2 class="posttitle">新着</h2>
	<?php edit_post_link('編集', '<p class="edit">', '</p>'); ?>

<div class="new">
	<?php
	query_posts( array(
	'post_type' => array( 'post' , 'illust' , 'comic' , 'oekaki' ),
	'posts_per_page' => '12',//12件表示する
	) );
	?>
	<?php while (have_posts()): the_post(); ?>
	<ul>
	<li><a href="<?php the_permalink(); ?>" title="「<?php the_title(); ?>」へ"><?php the_post_thumbnail( array(230,100) ); ?></a><br />
	<?php if('post' == get_post_type()):// 「通常投稿」(日記)なら ?>
	■<a href="<?php echo esc_url( home_url( '/k_diary/' ) ); ?>">日記</a>に
	<?php elseif('illust' == get_post_type()):// カスタム投稿「illusut」なら ?>
	■<a href="<?php echo esc_url( home_url( '/k_illust/' ) ); ?>">イラスト</a>に
	<?php elseif('comic' == get_post_type() ):// カスタム投稿「comic」なら ?>
	■<a href="<?php echo esc_url( home_url( '/k_comic/' ) ); ?>c">comic</a>に
	<?php elseif('oekaki' == get_post_type() ):// カスタム投稿「oekaki」なら ?>
	■<a href="<?php echo esc_url( home_url( '/k_oekaki/' ) ); ?>">お絵かきまとめ</a>に
	<?php else:?>
	<p><?php _e('該当する記事はありません'); ?></p>
	<?php endif; ?>	
	<a href="<?php the_permalink(); ?>" title="「<?php the_title(); ?>」へ">「<?php the_title(); ?>」</a>をup。(<?php the_time('Y.n.j'); ?>)<br />
	<?php the_excerpt(); // 抜粋を表示?>
	
	
	</li>
	</ul>
	<?php endwhile; //メインループ終了 ?>
</div><!--div.new 終了-->

</div><!--div.post 終了-->

</div><!--div#innerbox終了-->
</div><!--div#content終了-->

<?php get_sidebar('hajimeni'); ?>
<?php get_footer(); ?>

↑上記は、「もし○○なら~」「△△△の処理をする」という条件分岐です。

サムネイル(230x100)は共通、
それぞれ投稿記事ごとに、「通常投稿」なら→[日記]に△△という[記事タイトル]と抜粋」
「イラスト(カスタム投稿)」なら→[イラスト]に△△という[記事タイトル]と抜粋」・・・以下略
という条件分岐を書いています。

[日記]の文字部分をクリックすれば、「通常投稿(日記)」の一覧に飛び、
[イラスト]の文字部分をクリックすれば「イラスト」の一覧に飛ぶようにしています。
そして、[サムネイル]か[記事タイトル]をクリックすれば、それぞれ、その個別記事に飛ぶ、という感じです。


posts_per_page で表示件数を定義する

'posts_per_page' => '12',//12件表示する

↑この posts_per_page で、12件と、表示する件数を定義しています。
この '12' を '-1' とすると、すべての記事を表示 になります。
すべてを表示してしまうと量が多すぎるので、とりあえず 3×4列の12件くらいがいいかな、としました。

横が230pxのブロックであるとか、横に3つ並べるとかのデザイン部分は、すべてstyle.css で定義しています。


固定ページを一個、投稿して作成する

自動的に新着を表示するだけのトップページなので、各記事が投稿されたら勝手にそのページが自動で作られるんじゃないの?と思いがちですが、テンプレートを作っただけでは、まだページは存在していません

それを表示するための固定ページ(空ページ)を、まず投稿して作っておく必要があります。


ダッシュボード → 固定ページ新規追加 →「はじめに」というタイトルで、固定ページを1枚、投稿
選ぶテンプレートデザインは、もちろんphp作成時に「はじめに」という名前で定義したテンプレートです。

本文は、特に何も入れなくても大丈夫です。
(どう表示されるか実験のために、タイトル=「タイトル」、本文にも「はじめに」と文字を入れて、公開しておきました)


「表示オプション」→「スラッグ」で欧文のスラッグをつけられる

※投稿する際に、ダッシュボード上、右上の「表示オプション」を出して、「スラッグ」にチェックを入れておくと、以降、記事の左下の方に、「スラッグ」を入力できるボックスが現れます。
   ↓

(スラッグを定義していないと、パーマリンクの文末に、記事タイトルの日本語が使われてしまうため、私は必ず固定ページに欧文でスラッグ名を入れるようにしています。)
「はじめに」という固定ページなので、k_hajimeni というスラッグ名にしました。

   ↓

作った固定ページをトップページに指定する

「はじめに」という固定ページを投稿したら、次はそのページをトップページに指定します。

ダッシュボード → 設定 →「表示設定」を選択。
この画面でトップページをどれにするか切り替えられます。
   ↓

これで、「はじめに」という固定ページが、トップページになりました。


ナビゲーション(カスタムメニュー)も編集

ダッシュボード → 外観 →「メニュー」を選択。
(もし「外観」の中に「メニュー」という項目がない場合は、functions.php で設定しなければいけません)

   ↓

適当な名前をつけてメニューを保存
好きなように、メニューを追加したり、削除したりできます。
ナビゲーションラベルを出して名前(表示名)を変えることもできます。

「はじめに」だとなんか変な感じだったので、「home」という文字に変えました。


これで終了です。


010「固定ページ」を作る

wordpressには、「投稿ページ」と「固定ページ」という2種類のページの仕様があります。


「投稿ページ」とは、日々ブログなどを書く際に使われる通常のページのことで、使われるテンプレートとしては、index.php、single.php、archive.php などがあります。

index.php は、通常何も指定しなければ、たいていはwordpressのtopページに使われているページとなっています。
(最新の10件を表示している等のデザインが多いでしょうか)

single.php は、記事タイトルをクリックした時に、その記事一個分だけが表示されるページの事です。

archive.php は、アーカイブ、いわゆる書庫や保存一覧とされるもので、過去記事を項目別にまとめたリストを表示させるためのテンプレートページです。(月間アーカイブとか、カテゴリー○○○○の記事一覧とか)


「固定ページ」の使い道とは

それに対して「固定ページ」は、通常の「投稿ページ」とは違い、更新しない単体のコンテンツを書くのに使います。

(例えば「管理人について」とか「プロフィール」とかのページです。)


「固定ページ」は動的なページにすることもできる

静的なHTMLのページと似た感じで使われますが、phpのコードを書いて動的なページにすることもできます。
(例えば、記事を投稿すると項目が自動追記されるような「新着リスト」や「サイトマップ」など)


固定ページのテンプレートの優先順位

固定ページのテンプレートは、page.phpなのですが、
wordpressは、まずテーマの中に page-スラッグ名.php がないかどうか探します。

なかったら次に page-ID.php を探します。そのどちらもなければ page.php を読み込みます。
もし page.php すらも作らなかった場合は、最終的に index.php が使われるようになっています。


固定ページのテンプレートデザインを新規作成する

新しく固定ページのテンプレート(page-スラッグ名.php あるいは page-ID.phppage.php)を作る際には、文頭に下記の5行を記述します。

<?php
/*
Template Name: 固定ページの新規テンプレート名
*/
?>

Template Name: は、日本語でかまいません。

これを文頭に記述しておくと、新規の固定ページを投稿する際に、ダッシュボード上でどのデザインの固定ページにするのかを選ぶことができるようになります。

例えば「イラストの目次ページ」と「サイト一覧」を作ると仮定したら、もちろんそれぞれデザインも変えたいですよね。

page-illust.php のTemplate Nameは「イラスト目次」、page-sitemap.php のTemplate Nameは「サイトマップ」などと作っておけば、固定ページを投稿する際に、「目次」か「サイトマップ」か、どのテンプレートデザインにするかを選ぶことができるというわけです。


page.php がない場合に使われるテンプレートは?

page.php を作成していない場合は、「デフォルトテンプレート」しか選べない状態になっています。
page.php がない場合は最終的に index.php が使われることになっていますので、その場合は「デフォルトテンプレート」= index.php のデザインになるということになるかと思います。